<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 测试定时器开关 -->
    <div id = "div1">测试内容1</div>
    <button id = "btn1">测试按钮1——开始定时器</button>
    <button id = "btn2">测试按钮2——结束定时器</button>

    <!-- 测试延时器 -->
    <div id = "div3">测试内容3</div>
    <button id = "btn3">测试按钮3——开始延时器</button>
    <script>
        /*-------------------测试定时器-------------------*/
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        var div1 = document.getElementById('div1');
        
        let timer;//声明定时器对象
        var number = 0;//设置一个变量
        btn1.onclick = function(){
            timer = setInterval(function(){
                div1.innerText = number++;
            },1000)
        }

        btn2.onclick = function(){
            clearInterval(timer);
        }

        /*-------------------测试延时器-------------------*/
        var div3 = document.getElementById('div3');
        var btn3 = document.getElementById('btn3');
        btn3.onclick = function(){
            setTimeout(function()
            {div3.innerText = '测试内容3已经改变';
            },1000);
        }
    </script>
</body>
</html>